import React, { useEffect, useState } from 'react';
import { Form, Button, Input,Select,Col, Avatar,message } from 'antd'
import {UserOutlined} from '@ant-design/icons'
import '../../styles/zheng/Mydata.scss'
import {roleList,sexList,changeData,getData} from '../../api/zheng/index'
interface Props {

}

function Mydata(props: Props) {
    var [rolelist,setRolelist] = useState([])
    var [sexlist,setSexlist] = useState([])
    var [id,setId] = useState('')

    const { TextArea } = Input;
    // 调用Form的钩子函数useForm()
    const [form] = Form.useForm()
    const [messageApi, contextHolder] = message.useMessage()
    
    // 初始化阶段
    useEffect ( () => {
        var userinfo = JSON.parse(localStorage.getItem('user')+'')
        setId(userinfo.id)
        getData().then(res=>{
            var mydata = res.data.find((item:any)=>{
                return item.id ==  JSON.parse(localStorage.getItem('user')+'').id
            })
            form.setFieldsValue(mydata)
        })
        
         roleList().then(res=>{
            var arr = res.data.map(((item:any)=>{
                return {value:item.id,label:item.name}
            }))
            setRolelist(arr)
         })
         sexList().then(res=>{
            var arr1 = res.data.map(((item:any)=>{
                return {value:item.id,label:item.name}
            }))
            setSexlist(arr1)
         })
    }, [])
    // 提交表单
    const onFinish = async(values: any) => {
        console.log('Success:', values);
        var change = await changeData(values)
        if(change.status ==200){
            messageApi.open({
                type: 'success',
                content: '保存成功',
              });
        }
        
    };
    // 提交失败
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className='mydata'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>个人资料</h3>
            </div>
            <h4>医生信息</h4>
            <Form
                form={form}
                layout="inline"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Col span={8}>
                    <Form.Item
                        label="医生编号"
                        name="id"
                    >
                        {id}
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="用户名"
                        name="phone"
                        rules={[{ message: '请填写您的用户名！' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生头像"
                        name="avatar"
                        rules={[{ message: '请选择您的头像' }]}
                    >
                        <div className="avatorbox">
                            <Avatar icon={<UserOutlined />} />
                            <a >+点击上传</a>
                        </div>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生姓名"
                        name="name"
                        rules={[{ message: '请填写您的姓名！' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                    <Col span={8}>
                    <Form.Item
                        label="医生角色"
                        name="role"
                        rules={[{ message: '请选择您的角色' }]}
                    >
                        <Select 
                        options={rolelist}/>
                    </Form.Item>
                    </Col>
                    <Col span={8}>
                    <Form.Item
                        label="性别"
                        name="sex"
                        rules={[{ message: '请选择您的性别！' }]}
                    >
                        <Select 
                        options={sexlist}/>
                    </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="医生简介"
                            name="intro"
                            rules={[{ message: '请填写您的简介' }]}
                        >
                            <TextArea rows={4} />
                        </Form.Item>
                    </Col>
                    <Col span={16}></Col>
                    <Col span={8}>
                        <Form.Item
                            label="医生擅长"
                            name="good"
                            rules={[{ message: '请填写您所擅长的部分！' }]}
                        >
                            <TextArea rows={4} />
                        </Form.Item>
                    </Col>
                    <Col span={16}></Col>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
            </Form>
            {contextHolder}
        </div>
    );
}

export default Mydata;